/* eslint-disable react/require-default-props */
import React, { useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import {
  Form, TextField, DataSet, Select, TimePicker, SelectBox, DatePicker,
} from 'choerodon-ui/pro';
import { NewTips, CustomSelect } from '@choerodon/components';
import FormDs from './formDataSet';
import './index.less';

interface IProps<T> {
  data?: any
  dataRecordIndex: number
  existNameArr: string[]
  onModalOk: (data:T, index: number)=> void
}

export const triggerModeData = [
  {
    text: '周期触发',
    value: 'period',
  },
  {
    text: '单次触发',
    value: 'single',
  },
];

const Index: React.FC<IProps<any>> = (props) => {
  const {
    // @ts-ignore
    modal, data, dataRecordIndex, existNameArr, onModalOk,
  } = props;
  console.log(existNameArr);
  const prefixCls = 'c7ncd-continuousDeployment-operation-timing-trigger-form';
  const formDs = useMemo(() => {
    const ds = new DataSet(FormDs({ existNameArr }));
    if (data) {
      ds.loadData([data]);
    }
    return ds;
  }, []);

  const selectChange = (value: any) => {
    formDs?.current?.set('triggerType', value.value);
  };

  const handleOk = async () => {
    const validateRes = await formDs?.current?.validate();
    if (!validateRes) {
      return false;
    }
    onModalOk(
      formDs?.toData()[0],
      dataRecordIndex,
    );
    return true;
  };
  modal.handleOk(handleOk);

  return (
    <div className={prefixCls}>
      <Form dataSet={formDs}>
        <TextField name="name" />
      </Form>
      <div className="row-trigger-mode">
        <p className="title-label">
          定时触发方式
          <NewTips helpText={(
            <>
              <p>
                周期触发: 需要选择日期，确定一个时间段，并给出触发的时间间隔；之后每周的这个时间段就会按照时间间隔执行定时计划。
              </p>
              <p>
                单次触发: 需要选择日期，同时需要指定一个特定的时间，之后每周的这个时间都会定时执行此计划。
              </p>
            </>
          )}
          />
        </p>
        <div className={`${prefixCls}-customSelect`}>
          <CustomSelect
            onClickCallback={(value: any) => { selectChange(value); }}
            selectedKeys={formDs?.current?.get('triggerType')}
            data={triggerModeData}
            identity="value"
            mode="single"
            customChildren={(item: any): any => (
              <div className={`${prefixCls}-customSelect-item`}>
                <p>{item.text}</p>
              </div>
            )}
          />
        </div>
      </div>
      <div className="row-dates">
        <Form dataSet={formDs}>
          <SelectBox
            name="weekNumber"
          />
        </Form>
      </div>
      <Form dataSet={formDs}>
        {
          formDs?.current?.get('triggerType') === 'period' && (
            <>
              <DatePicker
                mode={'time' as any}
                name="timeRange"
                renderer={({ value, text }) => (String(text) ? `${text}:00` : text)}
              />
              <Select name="period" />
            </>
          )
        }
        {
          formDs?.current?.get('triggerType') === 'single' && <TimePicker name="executeTime" />
        }
      </Form>
    </div>
  );
};

export default observer(Index);
